從頭開始用 Laravel 來做CRUD -15- 初始 - vue.js- vue.js測試 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

從頭開始用 Laravel 來做CRUD -15- 初始 - vue.js- vue.js測試

crud laravel vue.js vue component

雲橙雨林 2018-10-31 13:52:40 ‧ 4444 瀏覽

分享至

目前環境

Laravel：5.7
資料庫：MariaDB

說明

所謂的CRUD是指新增(Create)、讀取(Read)、更新(Update)、刪除(Delete) 在程式動作中，基本的四個動作。
Laravel 是一個開源的PHP框架，它由Taylor Otwell開發，支持MVC模式。
Vue.js是一個用於建立使用者介面的開源JavaScript框架，也是一個建立單頁面應用的Web應用框架。

--- 本文開始 ---
上篇確定已以看到 Laravel 首頁了，我們再來確定 Vue.js 是不是可以用

1、將 webcome.blade.php 不必要的資料刪除

把一些不必要東西刪除後，加入圖內的資料

程式碼如下

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Crud</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="/css/app.css">
        
    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
    </body>
    <script src="/js/app.js"></script>
</html>

2、看瀏覽器是否出現以下畫面

如果有出現，就表示是正常的

3、完工及原理說明

app.js 讀取的位置為 /public/js/app.js 原始編碼在 /resources/js/app.js 裡，意思就是我們之後會開始在這裡編寫程式，下圖為該app.js 的內容

由上得知 #app 為為實例提供掛載元素。值可以是 CSS 選擇符，或實際 HTML 元素，或返回 HTML 元素的函數。

簡單的說就是去捉設為 id="app" 的地方

example-component為子組件，他是去讀取 /resources/js/components/ExampleComponent.vue的資料

也就是你所看到的畫面的資料

<div id="app">
    <example-component></example-component>
</div>

感謝

感謝各位的觀看！
友情連結：鑽頭-瑜誠
文中如有技術不良或寫錯的部份，如您願意指出，我們也很樂意接受您的指正，但請不要惡意攻撃，我們只是為了樂趣而寫的文章。

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22200 篇

完賽人數

602 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙